<template>
  <div style="font-size: 15px">
    <!-- 头部 -->
    <a-form ref="searchRef" :model="form" :hideRequiredMark="true">
      <a-row>
        <a-col :span="6" :offset="0">
          <a-form-item name="saleValue" label="发件人">
            <a-input placeholder="根据发件人模糊搜索" v-model:value="form.senderName"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6" :offset="1">
          <a-form-item name="saleValue" label="邮件主题">
            <a-input placeholder="根据邮件主题模糊搜索" v-model:value="form.subject"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="2" :offset="1">
          <a-button type="primary" @click="search" class="d-a-center">搜索</a-button>
        </a-col>
        <a-col :span="2">
          <a-button @click="reset" class="d-a-center">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <div v-if="listLength > 0">
      <a-table
        style="cursor: pointer"
        :dataSource="emailList.value"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        @change="handleTableChange"
        :customRow="rowClick"
        :showHeader="false"
      >
        <!-- 订单状态显示 --><!-- 1为已读，0为未读 -->
        <template v-slot:bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'isRead'">
            <img class="email-img" v-show="record.isRead == 1" src="@/assets/img/email/email-read.png" alt="emailRead" />
            <img class="email-img" v-show="record.isRead == 0" src="@/assets/img/email/email-unread.png" alt="emailUnread" />
          </template>
        </template>
      </a-table>
    </div>
    <a-empty :image="simpleImage" v-else />
    <!-- 列表 -->
  </div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'
import router from '@/router/index.js'
import { reactive, ref, toRefs, watch, computed, defineComponent, createVNode } from 'vue'
import {
  CloseOutlined,
  PlusCircleOutlined,
  ApartmentOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  // 附件
  PaperClipOutlined,
  FileExcelOutlined,
  FileGifOutlined,
  FilePptOutlined,
  FileMarkdownOutlined,
  FileImageOutlined,
  FileJpgOutlined,
  FilePdfOutlined,
  FileZipOutlined,
  FileWordOutlined,
  FileTextOutlined,
  FileUnknownOutlined
} from '@ant-design/icons-vue'
import { Modal, message, Empty } from 'ant-design-vue'
import { inboxEmailList, markAsRead } from '@/api/email/index.js'
export default {
  components: {},
  setup() {
    const router = useRouter()
    const searchRef = ref('')
    // 搜索
    // let form = reactive({
    // 	senderName: '',
    // 	subject: ''
    // });
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0
    })
    const data = reactive({
      loading: ref(true), //表格的加载
      listLength: 0,
      form: {}
    })
    const emailList = reactive([])
    const columns = [
      {
        title: '是否已读',
        dataIndex: 'isRead',
        key: 'isRead',
        width: 40
      },
      {
        title: '发件人',
        dataIndex: 'senderName',
        key: 'senderName',
        ellipsis: true,
        width: 270
      },
      {
        title: '邮箱主题',
        dataIndex: 'subject',
        key: 'subject',
        ellipsis: true
      },
      {
        title: '发送时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: 180
      }
    ]

    let detailUrl = decodeURI(router.options.history.state.forward)
    if (detailUrl != null) {
      let sta = detailUrl.indexOf('email-detail') != -1
      console.log('sta', detailUrl)
      if (sta) {
        let a = detailUrl.length
        let b = detailUrl.lastIndexOf('=')
        page.current = detailUrl.substr(b + 1, a - b)
        console.log('详情页传过来的列表页数', page.current)
        let c = detailUrl.lastIndexOf('&')
        let d = detailUrl.lastIndexOf('=', detailUrl.lastIndexOf('=') - 1) + 1
        data.form = JSON.parse(detailUrl.substring(d, c))
        console.log('暂存的搜索数据form', data.form)
      }
    }
    init()
    async function init() {
      console.log('1111111111111')
      // console.log(form, "搜索表单内容是");
      data.loading = false
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
        ...data.form
      }
      console.log(obj)
      let res = await inboxEmailList(obj)
      if (res.success) {
        emailList.value = res.object.list
        console.log('收件箱列表111', emailList.value)
        // console.log(1111111111111,eval(emailList.value[0].copies));
        page.total = res.object.total
        data.listLength = emailList.value.length
      }
    }

    // 分页器/-
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return '共' + total + '条'
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true
    }))
    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log('当前分页是', page.current)
      page.current = pagination.current
      page.pageSize = pagination.pageSize
      console.log('普通搜索1111111111111111111')
      init()
    }

    // 查询邮件
    const search = () => {
      page.current = 1
      init()
    }
    const rowClick = (record, index) => {
      return {
        onclick: event => {
          let res = markAsRead({
            emailId: record.id
          })
          console.log('已读未读', res)
          console.log('1122email详情11111111111')
          router.push({
            path: '/email/all/look/email-detail',
            query: {
              id: record.id,
              form: JSON.stringify(data.form),
              page: page.current
            }
          })
        }
      }
    }
    const methods = {
      reset() {
        console.log('重置111111')
        data.form = {}
        page.current = 1
        init()
      }
    }
    return {
      ...toRefs(data),
      ...methods,
      emailList,
      searchRef,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      columns,
      pagination,
      handleTableChange,
      rowClick,
      search
    }
  }
}
</script>
<style scoped lang="less">
.email-img {
  width: 20px;
  height: 25px;
}
</style>
